<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- 必须的 meta 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #app{
            display: inline-block;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div class="container-fluid content" id="bookContent">
    <div class="toolbar" style="float: right">
        <input type="text" id="selEmpp" placeholder="请输入名字">
        <input type="text" id="selEmpp1" placeholder="请输入职位">
        <button class="btn btn-primary" @click="selEmpp()">查询</button>
        <button class="btn btn-success" onclick="location.href='addemployee.html'">添加</button>
        <button class="btn btn-danger" id="del-btn" @click="delEmpAll()">批量删除</button>
    </div>
    <table id="book-tab" class="table table-hover" style="text-align: center;line-height: 38px">
        <tr>
            <th><input type="checkbox" @click="allCheck" id="checkAll"/></th>
            <th>ID</th>
            <th>名字</th>
            <th>性别</th>
            <th>身份证</th>
            <th>电话</th>
            <th>地址</th>
            <th>职位</th>
            <th>操作</th>
        </tr>
        <tr v-for="e in list">
            <td><input class="check" @click="isCheckAll" type="checkbox" :value="e.employeeId"></td>
            <td>{{ e.employeeId }}</td>
            <td>{{ e.employeeName }}</td>
            <td>{{ e.employeeSex==1?"男":"女"}}</td>
            <td>{{ e.employeeIdCard }}</td>
            <td>{{ e.employeePhoneNumer }}</td>
            <td>{{ e.employeeAddress }}</td>
            <td width="">
                <span style="padding: 0px 2px 0px 2px" v-for="job in e.jobList">{{job.jobTitle}}</span>
            </td>
            <td><!-- 按钮：用于打开模态框
                为了传递数据需要基于js方式（VUE）打开模态框 @click="openUpd(b)"-->
                <button type="button" class="btn btn-primary" @click="openUpd(e)">
                    修改
                </button>
                <button class="btn btn-danger" v-on:click="delEmp(e.employeeId)">删除</button>
            </td>
        </tr>
    </table>
    <!--            分页-->
    <div class="pagination-div">
        <!--                无序列表 -->
        <ul class="pagination" id="page-ul">
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" @click="cutPage(1)">首页</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=1">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
            <li class="page-item active">
                <a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=page.pageTotal">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow+1)">{{page.pageNow+1}}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);
                   ">共{{page.count}}条数据</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageTotal)">尾页</a>
            </li>
        </ul>
    </div>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">修改窗口</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body" id="app-div">
                    <form id="employee-form">
                        <div class="form-group">
                            <label for="employeeName">员工名字:</label>
                            <input type="text" name="employeeName" class="form-control" id="employeeName"
                             v-model="employee.employeeName">
                        </div>
                        性别：
                        <label class="radio-inline"><input type="radio" name="employeeSex" v-model="employee.employeeSex" value="1"
                        >男</label>
                        <label class="radio-inline"><input type="radio" name="employeeSex" v-model="employee.employeeSex"value="2"
                        >女</label>
                        <div class="form-group">
                            <label for="employeeIdCard">身份证:</label>
                            <input type="number" name="employeeIdCard" step="0.01"v-model="employee.employeeIdCard" class="form-control" id="employeeIdCard"
                            >
                        </div>
                        <div class="form-group">
                            <label for="employeePhoneNumer">电话号:</label>
                            <input type="number" name="employeePhoneNumer" v-model="employee.employeePhoneNumer" step="0.01" class="form-control" id="employeePhoneNumer"
                            >
                        </div>
                        <div class="form-group">
                            <label for="employeeAddress">地址:</label>
                            <input type="text" name="employeeAddress" class="form-control"  v-model="employee.employeeAddress"id="employeeAddress"
                            >
                        </div>
                        职位：<div v-for="(job, index) in jobs" class="form-check form-check-inline">
                            <label class="form-check-label">
                                <input type="checkbox" name="jobId" class="form-check-input" :value="job.jobId"
                                       v-model="empjobs">{{job.jobTitle}}
                            </label>
                        </div>
                        <input type="text" name="employeeId" style="display: none" step="0.01" v-model="employee.employeeId" class="form-control"
                        >
                    </form>
                </div>

                <!-- 模态框底部 -->

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="submit-emp" style="margin-right:150px "
                            @click="updEmp()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript" src="../bootstrap/vue.js"></script>
<script type="text/javascript" src="../bootstrap/jquery3.6.js"></script>

<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bootstrap/my.js"></script>
<script>
    let employeeTabVue;
    let map;

    // 初始化表格数据
    $(function () {
        // 调用查询方法 因为是第一次查询所以当前页参数1
        map = selEmp(1);
        // Vue列表 表格数据
        employeeTabVue = new Vue({
            el: '#bookContent',
            data: {
                list: map.list,// 展示表格
                page: map.page,// 用于分页
                joblist: map.joblist,
                jobs: {},
                employee: {},
                empjobs:[]
            },// 参数调用查询函数
            methods: {
                allCheck: function () {
                    eventHub.$emit("allCheck",null);
                },

                isCheckAll: function () {
                    eventHub.$emit("isCheckAll",null);
                },
                updEmp:function (){
                    $.ajax({
                        type:"post",
                        url:"../Employee/updEmp",
                        data:$("#employee-form").serialize(),
                        dataType:"json",
                        success:function (data){
                            alert(data.message);
                            $('#myModal').modal('hide');
                            map = selEmp(1,"","");
                            employeeTabVue.list = selEmp(1,"","").list;
                            employeeTabVue.page.pageNow = 1;
                            employeeTabVue.page.pageTotal = map.page.pageTotal;
                            employeeTabVue.page.count=map.page.count;
                        }
                    })
                },

                selEmpp:function (){
                    var z=$("#selEmpp").val();
                    var z1=$("#selEmpp1").val();
                    employeeTabVue.list = selEmp(1,z,z1).list;
                    employeeTabVue.page = selEmp(1,z,z1).page;
                },
                delEmp: function (employeeId) {
                    // 执行删除
                    $.ajax({
                        type: "post",
                        url: "../Employee/delEmp",
                        data: {employeeId: employeeId},
                        dataType: "json",
                        success: function (data) {
                            alert(data.message)
                            // 删除完成后重新查询第一页
                            map = selEmp(1,"","");
                            employeeTabVue.list = selEmp(1,"","").list;
                            employeeTabVue.page.pageNow = 1;
                            employeeTabVue.page.pageTotal = map.page.pageTotal;
                            employeeTabVue.page.count=map.page.count;
                            eventHub.$emit("closeCheckAll",null);

                        }
                    });
                },
                cutPage: function (pageNow) {
                    var z=$("#selEmpp").val();
                    var z1=$("#selEmpp1").val();
                    //查询要切换页的数据。把结果从新给表格赋值
                    employeeTabVue.list = selEmp(pageNow,z,z1).list;
                    //把分页的vue重新赋值。
                    employeeTabVue.page.pageNow = pageNow;
                },
                delEmpAll: function () {
                    let ids = "";
                    // 获取复选框中的值 id值 使用类选择器each()遍历方法
                    $(".check").each(function () {
                        // 对所有符合该选择器的元素进行操作。 this 复选框.value
                        // 判断该复选框是否选中
                        if (this.checked) {
                            ids += this.value + ",";
                        }
                    })
                    if(ids=="") return ;
                    // ajax把拼接的id传入到后台
                    $.ajax({
                        type: "post",
                        url: "../Employee/delEmpAll",
                        data: {ids: ids},
                        dataType: "json",
                        success: function (data) {
                            // 删除完成后重新查询第一页
                            alert(data.message)

                            map = selEmp(1,"","");
                            employeeTabVue.list = selEmp(1,"","").list;
                            employeeTabVue.page.pageNow = 1;
                            employeeTabVue.page.pageTotal = map.page.pageTotal;
                            employeeTabVue.page.count=map.page.count;
                            eventHub.$emit("closeCheckAll",null);
                        }
                    });
                },
                openUpd: function (e) {
                    // 打开模态框 获取模态框id.modal('show');
                    $.ajax({
                        type: "post",
                        url: "../Job/selJobAll",
                        dataType: "json",
                        success: function (json) {
                            employeeTabVue.jobs = json.list;
                        }
                    });
                    $('#myModal').modal('show');
                    this.employee = e;
                    let jobs=[];
                    for(let i=0 ;i<e.jobList.length;i++){
                        jobs.push(e.jobList[i].jobId)
                    }
                    this.empjobs=jobs;
                }
                }

        });
    });

    // 查询图书 去后台查询数据，返回查询的结果json数组。
    // 需要接受一个当前页参数。
    function selEmp(pageNow,employeeName,jobTitle1) {
        let map = [];
        $.ajax({
            type: "post",
            url: "../Employee/selEmp",
            data: {pageNow: pageNow, pageCount: 5,employeeName:employeeName,jobTitle1:jobTitle1},// 携带当前页参数，显示的条数
            dataType: "json",
            async: false,
            success: function (data) {
                // 接受Controller层查询结果
                map = data;
            }
        });// 查询的数据（list）和分页的数据（page）
        return map;
    }



</script>
</body>
</html>